<template>
	<view class="custom-image" :style="{width: $u.addUnit(this.width), height: $u.addUnit(this.height)}" @click="$emit('click')">
		<u-image 
			:src="src" 
			:width="width" 
			:height="height" 
			:radius="radius"
			:mode="mode" 
			:bgColor="bgColor" 
		>
			<image slot="loading" class="slot-image" src="@/static/images/loading.png" mode="widthFix"></image>
			<image slot="error" class="slot-image" src="@/static/images/error.png" mode="widthFix"></image>
		</u-image>
	</view>
</template>

<script>
	export default {
		props: {
			// 图片地址
			src: String,
			// 裁剪模式
			mode: {
				type: String,
				default: 'aspectFill'
			},
			// 宽度，单位任意
			width: {
				type: [String, Number],
				default: '100%'
			},
			// 高度，单位任意
			height: {
				type: [String, Number],
				default: '100%'
			},
			// 圆角，单位任意
			radius: {
				type: [String, Number],
				default: 0
			},
			bgColor: {
				type: String,
				default: '#f3f4f6'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-image {
		.slot-image {
			width: 40%;
			height: auto;
		}
	}
</style>